<template>
  <div>
    <van-field
      readonly
      clickable
      :value="value"
      placeholder="请选择"
      @click="showPicker = true"
      input-align="right"
      right-icon="arrow"
    >
      <template #label> 朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向 </template>
    </van-field>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="orientedTypeArr"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    releaseHomeData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      value: "",
      showPicker: false,
      columns: ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州"],
      orientedTypeArr: [],
    };
  },
  created() {},
  mounted() {
    this.getOrientedType();
  },
  methods: {
    getOrientedType() {
      console.log(this.releaseHomeData.oriented);
      this.releaseHomeData.oriented.forEach((item) => {
        return this.orientedTypeArr.push(item.label);
      });
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      const filterItem = this.releaseHomeData.oriented.filter((item) => {
        return item.label === value;
      });
      console.log(filterItem);
      this.$emit("orientedType", filterItem);
    },
  },
};
</script>

<style></style>
